<template>
  <div class="proj-container">
    <!-- header -->
    <div class="proj-header">
      <span>项目管理</span>
      <el-button-group>
        <el-button type="primary" @click="visiable.addProj = true"> 新增 </el-button>
      </el-button-group>
    </div>

    <!-- table -->
    <div>
      <el-table :data="projState.projs" border>
        <el-table-column type="index" label="序号" width="80" align="center" />

        <el-table-column label="项目名称" width="" align="center">
          <template #default="scope">
            <span class="proj-item" @click="$router.push({ name: 'line', params: { id: scope.row.id } })">
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          v-for="col in columns"
          :prop="col.prop"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          :align="col.align" />

        <el-table-column label="导线盘数(个)" width="150" align="center">
          <template #default="scope">
            <span class="proj-item" @click="$router.push({ name: 'wire', params: { id: scope.row.id } })">
              {{ scope.row.wireCount }}个
            </span>
          </template>
        </el-table-column>

        <el-table-column label="区段数量(个)" width="150" align="center">
          <template #default="scope">
            <span class="proj-item" @click="$router.push({ name: 'line', params: { id: scope.row.id } })">
              {{ scope.row.lineCount }}个
            </span>
          </template>
        </el-table-column>

        <el-table-column label="创建日期" width="200" align="center">
          <template #default="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" @click="edit(scope.row)"> 编辑 </el-button>
              <el-button type="danger" @click="del(scope.row)"> 删除 </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <EditProjDialog :visiable="visiable.editProj" :editProj="editProj" @closed="closed" />
  <AddProjDialog :visiable="visiable.addProj" @closed="closed" />
</template>

<script setup lang="ts">
import AddProjDialog from '@/components/proj/AddProjDialog.vue'
import EditProjDialog from '@/components/proj/EditProjDialog.vue'
import useProjState from '@/states/useProjStore'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'

const visiable = reactive({
  addProj: false,
  editProj: false,
})
const editProj = ref()
const projState = useProjState()

const columns = [
  {
    id: 2,
    prop: 'shortName',
    label: '项目简称',
    width: '150',
    align: 'center',
  },
  {
    id: 3,
    prop: 'dianya',
    label: '电压等级',
    width: '150',
    align: 'center',
  },
]

async function closed() {
  visiable.addProj = false
  visiable.editProj = false
  await projState.all()
}

async function del(data: ProjDataInter) {
  await ElMessageBox.confirm(`是否删除"${data.shortName}"工程?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await projState.del(data.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
  await projState.all()
}

function edit(data: ProjDataInter) {
  visiable.editProj = true
  editProj.value = data
}

projState.all()
</script>

<style scoped lang="scss">
.proj-container {
  @apply grid grid-rows-[50px_1fr] bg-gray-300;
  .proj-header {
    @apply flex justify-between items-center px-4;
    span {
      @apply text-lg font-bold;
    }
  }
  .proj-item {
    padding: 4px 0;
    cursor: pointer;
    background-image: linear-gradient(to right, #2980b9, #2980b9);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 4px;
    transition: 0.3s ease-in-out;
  }
  .proj-item:hover {
    background-size: 100% 4px;
    color: #2980b9;
  }
}
</style>

<script lang="ts">
export default {
  route: {
    name: 'proj',
  },
}
</script>
